<template>
  <div class="min-h-screen bg-gray-50">


    <!-- 主要内容区域 -->
    <div class="container mx-auto px-12 py-16 mt-28">
      <div class="max-w-6xl mx-auto">
        <!-- 页面标题 -->
        <div class="mb-16">
          <div class="flex items-center gap-6 mb-6">
            <div class="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
              <el-icon class="text-white text-3xl">
                <User />
              </el-icon>
            </div>
            <div>
              <h1 class="text-5xl font-bold text-gray-900 mb-3">个人中心</h1>
              <p class="text-xl text-gray-600">管理您的个人信息和账户设置，打造专属学习体验</p>
            </div>
          </div>
          <div class="h-px bg-gradient-to-r from-transparent via-gray-300 to-transparent"></div>
        </div>

        <!-- 个人信息卡片 -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-12 mb-12">
          <div class="flex items-center justify-between mb-8">
            <div class="flex items-center gap-6">
              <h2 class="text-4xl font-bold text-gray-900">个人信息</h2>
              <!-- 实名认证状态标签 -->
              <div v-if="!userInfo.isVerified" class="bg-red-100 text-red-800 px-4 py-2 rounded-full text-base font-medium flex items-center gap-2">
                <el-icon class="text-red-500">
                  <Warning />
                </el-icon>
                未实名认证
              </div>
              <div v-else class="bg-green-100 text-green-800 px-4 py-2 rounded-full text-base font-medium flex items-center gap-2">
                <el-icon class="text-green-500">
                  <CircleCheck />
                </el-icon>
                已实名认证
              </div>
            </div>
            <div class="flex items-center gap-4">
              <el-button type="primary" size="large" @click="saveProfile" :loading="saving" class="px-8 py-3 text-base font-medium">保存修改</el-button>
              <el-button type="danger" size="large" @click="logout" class="font-medium px-8 py-3 text-base">退出登录</el-button>
            </div>
          </div>

          <!-- 实名认证提醒 -->
          <div v-if="!userInfo.isVerified" class="mb-8">
            <div class="bg-gradient-to-r from-red-50 to-orange-50 border border-red-200 rounded-xl p-6">
              <div class="flex items-center gap-4">
                <el-icon class="text-red-500 text-2xl">
                  <Warning />
                </el-icon>
                <div class="flex-1">
                  <h4 class="text-lg font-semibold text-red-800 mb-2">实名认证提醒</h4>
                  <p class="text-base text-red-700">您尚未完成实名认证，无法观看直播课程。请尽快完成实名认证以享受完整的学习体验。</p>
                </div>
                <el-button type="danger" size="large" @click="showVerificationDialog = true" class="font-medium px-6 py-3">
                  立即认证
                </el-button>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
            <!-- 左侧：头像和基本信息 -->
            <div class="space-y-8">
              <!-- 头像上传 -->
              <div class="flex items-center gap-8">
                <div class="relative">
                  <div class="w-32 h-32 rounded-full overflow-hidden bg-gray-100 border-4 border-gray-200 shadow-xl">
                    <img 
                      v-if="userInfo.avatar" 
                      :src="userInfo.avatar" 
                      alt="用户头像" 
                      class="w-full h-full object-cover"
                    />
                    <div v-else class="w-full h-full flex items-center justify-center">
                      <el-icon class="text-4xl text-gray-400">
                        <User />
                      </el-icon>
                    </div>
                  </div>
                  <el-button 
                    size="small" 
                    class="absolute -bottom-2 -right-2 rounded-full w-10 h-10 p-0 shadow-lg"
                    @click="uploadAvatar"
                  >
                    <el-icon>
                      <Camera />
                    </el-icon>
                  </el-button>
                </div>
                <div>
                  <h3 class="text-2xl font-semibold text-gray-900 mb-2">{{ userInfo.nickname +'老师'|| '设置昵称' }}</h3>
                  <p class="text-base text-gray-500">点击头像更换照片</p>
                  <div v-if="userInfo.isVerified" class="text-sm text-green-600 mt-2">
                    认证姓名：{{ userInfo.realName }}
                  </div>
                  <div v-if="userInfo.verifiedAt" class="text-xs text-gray-500 mt-1">
                    认证时间：{{ new Date(userInfo.verifiedAt).toLocaleDateString() }}
                  </div>
                </div>
              </div>

              <!-- 昵称 -->
              <div>
                <label class="block text-base font-medium text-gray-700 mb-3">昵称</label>
                <el-input 
                  v-model="userInfo.nickname" 
                  placeholder="请输入昵称"
                  class="w-full"
                  size="large"
                />
              </div>

              <!-- 用户名 -->
              <div>
                <label class="block text-base font-medium text-gray-700 mb-3">用户名</label>
                <el-input 
                  v-model="userInfo.username" 
                  placeholder="请输入用户名"
                  class="w-full"
                  :disabled="true"
                  size="large"
                />
                <p class="text-sm text-gray-500 mt-2">用户名不可修改</p>
              </div>
            </div>

            <!-- 右侧：联系信息 -->
            <div class="space-y-8">
              <!-- 手机号 -->
              <div>
                <label class="block text-base font-medium text-gray-700 mb-3">手机号</label>
                <div class="flex gap-3">
                  <el-input 
                    v-model="userInfo.phone" 
                    placeholder="请输入手机号"
                    class="flex-1"
                    size="large"
                  />
                  <el-button size="large" @click="verifyPhone" class="px-6 py-3">验证</el-button>
                </div>
              </div>

              <!-- 邮箱 -->
              <div>
                <label class="block text-base font-medium text-gray-700 mb-3">邮箱</label>
                <div class="flex gap-3">
                  <el-input 
                    v-model="userInfo.email" 
                    placeholder="请输入邮箱"
                    class="flex-1"
                    size="large"
                  />
                  <el-button size="large" @click="verifyEmail" class="px-6 py-3">验证</el-button>
                </div>
              </div>

              <!-- 性别 -->
              <div>
                <label class="block text-base font-medium text-gray-700 mb-3">性别</label>
                <el-radio-group v-model="userInfo.gender" size="large">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                  <el-radio label="other">其他</el-radio>
                </el-radio-group>
              </div>

              <!-- 生日 -->
              <div>
                <label class="block text-base font-medium text-gray-700 mb-3">生日</label>
                <el-date-picker
                  v-model="userInfo.birthday"
                  type="date"
                  placeholder="选择生日"
                  class="w-full"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  size="large"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 账户安全卡片 -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-12 mb-12">
          <h2 class="text-4xl font-bold text-gray-900 mb-8">账户安全</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 修改密码 -->
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 border border-blue-200 rounded-xl p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center">
                  <el-icon class="text-white text-2xl">
                    <Lock />
                  </el-icon>
                </div>
                <div>
                  <h3 class="text-xl font-semibold text-gray-900">登录密码</h3>
                  <p class="text-base text-gray-600">定期更换密码保护账户</p>
                </div>
              </div>
              <el-button type="primary" size="large" @click="showPasswordDialog = true" class="w-full px-6 py-3 text-base font-medium">
                修改密码
              </el-button>
            </div>

            <!-- 手机验证 -->
            <div class="bg-gradient-to-br from-green-50 to-green-100 border border-green-200 rounded-xl p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
                  <el-icon class="text-white text-2xl">
                    <Iphone />
                  </el-icon>
                </div>
                <div>
                  <h3 class="text-xl font-semibold text-gray-900">手机验证</h3>
                  <p class="text-base text-gray-600">{{ maskPhone(userInfo.phone) }}</p>
                </div>
              </div>
              <el-button type="success" size="large" @click="verifyPhone" class="w-full px-6 py-3 text-base font-medium">
                重新验证
              </el-button>
            </div>

            <!-- 邮箱验证 -->
            <div class="bg-gradient-to-br from-purple-50 to-purple-100 border border-purple-200 rounded-xl p-8 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
              <div class="flex items-center gap-4 mb-6">
                <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center">
                  <el-icon class="text-white text-2xl">
                    <Message />
                  </el-icon>
                </div>
                <div>
                  <h3 class="text-xl font-semibold text-gray-900">邮箱验证</h3>
                  <p class="text-base text-gray-600">{{ maskEmail(userInfo.email) }}</p>
                </div>
              </div>
              <el-button type="warning" size="large" @click="verifyEmail" class="w-full px-6 py-3 text-base font-medium">
                重新验证
              </el-button>
            </div>
          </div>
        </div>



        <!-- 学习统计卡片 -->
        <div class="bg-white rounded-2xl shadow-xl border border-gray-100 p-12">
          <h2 class="text-4xl font-bold text-gray-900 mb-8">学习统计</h2>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center p-10 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl border border-blue-200 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
              <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <el-icon class="text-white text-3xl">
                  <Document />
                </el-icon>
              </div>
              <div class="text-5xl font-bold text-blue-600 mb-3">{{ userStats.totalCourses }}</div>
              <div class="text-xl text-gray-700 font-medium">已教课程</div>
            </div>
            <div class="text-center p-10 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
              <div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <el-icon class="text-white text-3xl">
                  <Clock />
                </el-icon>
              </div>
              <div class="text-5xl font-bold text-green-600 mb-3">{{ userStats.totalHours }}</div>
              <div class="text-xl text-gray-700 font-medium">授课时长(小时)</div>
            </div>
            <div class="text-center p-10 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl border border-purple-200 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
              <div class="w-20 h-20 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-6">
                <el-icon class="text-white text-3xl">
                  <Trophy />
                </el-icon>
              </div>
              <div class="text-5xl font-bold text-purple-600 mb-3">{{ userStats.certificates }}</div>
              <div class="text-xl text-gray-700 font-medium">获得证书</div>
            </div>
          </div>
        </div>


      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="showPasswordDialog"
      title="修改密码"
      width="500px"
      :close-on-click-modal="false"
      class="password-dialog"
    >
      <div class="space-y-6">
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">当前密码</label>
          <el-input 
            v-model="passwordForm.oldPassword" 
            type="password" 
            placeholder="请输入当前密码"
            show-password
            size="large"
          />
        </div>
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">新密码</label>
          <el-input 
            v-model="passwordForm.newPassword" 
            type="password" 
            placeholder="请输入新密码"
            show-password
            size="large"
          />
        </div>
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">确认新密码</label>
          <el-input 
            v-model="passwordForm.confirmPassword" 
            type="password" 
            placeholder="请再次输入新密码"
            show-password
            size="large"
          />
        </div>
      </div>
      <template #footer>
        <div class="flex justify-end gap-4">
          <el-button size="large" @click="showPasswordDialog = false" class="px-8 py-3 text-base">取消</el-button>
          <el-button type="primary" size="large" @click="changePassword" :loading="changingPassword" class="px-8 py-3 text-base font-medium">确认修改</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 实名认证对话框 -->
    <el-dialog
      v-model="showVerificationDialog"
      title="实名认证"
      width="700px"
      :close-on-click-modal="false"
      class="verification-dialog"
    >
      <div class="space-y-6">
        <!-- 认证说明 -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 border border-blue-200 rounded-xl p-8">
          <div class="flex items-center gap-4 mb-4">
            <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center">
              <el-icon class="text-white text-xl">
                <InfoFilled />
              </el-icon>
            </div>
            <div>
              <h3 class="text-xl font-semibold text-blue-800 mb-2">认证说明</h3>
              <p class="text-base text-blue-700 leading-relaxed">
                请上传身份证正反面照片进行实名认证。认证通过后即可观看直播课程。
              </p>
            </div>
          </div>
        </div>

        <!-- 真实姓名 -->
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">真实姓名</label>
          <el-input 
            v-model="verificationForm.realName" 
            placeholder="请输入身份证上的真实姓名"
            class="w-full"
            size="large"
          />
        </div>

        <!-- 身份证号 -->
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">身份证号</label>
          <el-input 
            v-model="verificationForm.idNumber" 
            placeholder="请输入身份证号码"
            class="w-full"
            size="large"
          />
        </div>

        <!-- 人脸识别验证 -->
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">人脸识别验证</label>
          <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-6">
            <div class="flex items-center justify-between">
              <div class="flex items-center gap-4">
                <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center">
                  <el-icon class="text-white text-xl">
                    <User />
                  </el-icon>
                </div>
                <div>
                  <h4 class="text-lg font-semibold text-green-800 mb-1">人脸录入</h4>
                  <p class="text-sm text-green-700">基于深度学习的人脸录入技术，建立身份档案</p>
                </div>
              </div>
              <el-button 
                type="success" 
                size="large" 
                @click="openFaceEnrollment"
                class="px-6 py-3"
              >
                开始录入
              </el-button>
            </div>
          </div>
        </div>

        <!-- 身份证照片上传 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <!-- 人像面 -->
          <div>
            <label class="block text-base font-medium text-gray-700 mb-4">身份证人像面</label>
            <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-all duration-200">
              <div v-if="!verificationForm.frontImage" class="space-y-6">
                <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto">
                  <el-icon class="text-gray-400 text-3xl">
                    <Upload />
                  </el-icon>
                </div>
                <div>
                  <p class="text-base font-medium text-gray-700 mb-2">点击上传人像面照片</p>
                  <p class="text-sm text-gray-500">支持 jpg、png、gif 格式，最大 5MB</p>
                </div>
                <el-button type="primary" size="large" @click="uploadIdCardFront" class="px-6 py-3">选择文件</el-button>
              </div>
              <div v-else class="space-y-4">
                <img :src="verificationForm.frontImage" alt="身份证人像面" class="w-full h-48 object-cover rounded-lg shadow-sm" />
                <el-button type="primary" size="large" @click="uploadIdCardFront" class="px-6 py-3">重新上传</el-button>
              </div>
            </div>
          </div>

          <!-- 国徽面 -->
          <div>
            <label class="block text-base font-medium text-gray-700 mb-4">身份证国徽面</label>
            <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-400 hover:bg-blue-50 transition-all duration-200">
              <div v-if="!verificationForm.backImage" class="space-y-6">
                <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto">
                  <el-icon class="text-gray-400 text-3xl">
                    <Upload />
                  </el-icon>
                </div>
                <div>
                  <p class="text-base font-medium text-gray-700 mb-2">点击上传国徽面照片</p>
                  <p class="text-sm text-gray-500">支持 jpg、png、gif 格式，最大 5MB</p>
                </div>
                <el-button type="primary" size="large" @click="uploadIdCardBack" class="px-6 py-3">选择文件</el-button>
              </div>
              <div v-else class="space-y-4">
                <img :src="verificationForm.backImage" alt="身份证国徽面" class="w-full h-48 object-cover rounded-lg shadow-sm" />
                <el-button type="primary" size="large" @click="uploadIdCardBack" class="px-6 py-3">重新上传</el-button>
              </div>
            </div>
          </div>
        </div>

        <!-- 隐私协议 -->
        <div class="bg-gray-50 border border-gray-200 rounded-xl p-6">
          <div class="flex items-start gap-4">
            <el-checkbox v-model="verificationForm.agreePrivacy" class="mt-1" size="large" />
            <div class="text-base text-gray-700">
              <span>我已阅读并同意</span>
              <a href="#" class="text-blue-600 hover:text-blue-800 hover:underline font-medium">《实名认证服务协议》</a>
              <span>和</span>
              <a href="#" class="text-blue-600 hover:text-blue-800 hover:underline font-medium">《隐私政策》</a>
              <span class="text-red-500">*</span>
            </div>
          </div>
        </div>
      </div>
             <template #footer>
         <div class="flex justify-end gap-4">
           <el-button size="large" @click="showVerificationDialog = false" class="px-8 py-3 text-base">取消</el-button>
           <el-button type="primary" size="large" @click="submitVerification" :loading="submittingVerification" :disabled="!canSubmitVerification" class="px-8 py-3 text-base font-medium">
             提交认证
           </el-button>
         </div>
       </template>
    </el-dialog>

    <!-- 手机验证对话框 -->
    <el-dialog
      v-model="showPhoneVerifyDialog"
      title="手机验证"
      width="480px"
      :close-on-click-modal="false"
      class="verify-dialog"
    >
      <div class="space-y-6">
        <div class="text-center">
          <div class="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <el-icon class="text-white text-2xl">
              <Iphone />
            </el-icon>
          </div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2">验证手机号</h3>
          <p class="text-gray-600">{{ maskPhone(userInfo.phone) }}</p>
        </div>
        
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">验证码</label>
          <div class="flex gap-3">
            <el-input
              v-model="phoneVerifyCode"
              placeholder="请输入6位验证码"
              maxlength="6"
              size="large"
              class="flex-1"
            />
            <el-button
              type="primary"
              size="large"
              :disabled="phoneCountdown > 0"
              @click="sendPhoneCode"
              class="px-6"
            >
              {{ phoneCountdown > 0 ? `${phoneCountdown}s` : '获取验证码' }}
            </el-button>
          </div>
          <!-- 自动填入验证码开关 -->
          <div class="mt-3">
            <el-checkbox v-model="autoFillVerifyCode" size="small">
              <span class="text-sm text-gray-600">自动填入验证码</span>
            </el-checkbox>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="flex justify-end gap-4">
          <el-button size="large" @click="showPhoneVerifyDialog = false" class="px-8 py-3 text-base">取消</el-button>
          <el-button type="primary" size="large" @click="confirmPhoneCode" class="px-8 py-3 text-base font-medium">
            确认验证
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 邮箱验证对话框 -->
    <el-dialog
      v-model="showEmailVerifyDialog"
      title="邮箱验证"
      width="480px"
      :close-on-click-modal="false"
      class="verify-dialog"
    >
      <div class="space-y-6">
        <div class="text-center">
          <div class="w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
            <el-icon class="text-white text-2xl">
              <Message />
            </el-icon>
          </div>
          <h3 class="text-xl font-semibold text-gray-900 mb-2">验证邮箱</h3>
          <p class="text-gray-600">{{ maskEmail(userInfo.email) }}</p>
        </div>
        
        <div>
          <label class="block text-base font-medium text-gray-700 mb-3">验证码</label>
          <div class="flex gap-3">
            <el-input
              v-model="emailVerifyCode"
              placeholder="请输入6位验证码"
              maxlength="6"
              size="large"
              class="flex-1"
            />
            <el-button
              type="primary"
              size="large"
              :disabled="emailCountdown > 0"
              @click="sendEmailCode"
              class="px-6"
            >
              {{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
            </el-button>
          </div>
          <!-- 自动填入验证码开关 -->
          <div class="mt-3">
            <el-checkbox v-model="autoFillVerifyCode" size="small">
              <span class="text-sm text-gray-600">自动填入验证码</span>
            </el-checkbox>
          </div>
        </div>
      </div>
      
      <template #footer>
        <div class="flex justify-end gap-4">
          <el-button size="large" @click="showEmailVerifyDialog = false" class="px-8 py-3 text-base">取消</el-button>
          <el-button type="primary" size="large" @click="confirmEmailCode" class="px-8 py-3 text-base font-medium">
            确认验证
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 人脸录入对话框 -->
    <el-dialog
      v-model="showFaceEnrollmentDialog"
      title="人脸录入"
      width="600px"
      :close-on-click-modal="false"
      :before-close="closeFaceEnrollmentDialog"
      class="face-enrollment-dialog"
    >
      <!-- 准备阶段 -->
      <div v-if="faceEnrollmentStep === 'prepare'" class="space-y-6">
        <div class="text-center">
          <div class="w-24 h-24 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-4xl">
              <User />
            </el-icon>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 mb-4">人脸录入</h3>
          <p class="text-gray-600 mb-6">请确保光线充足，面部清晰可见，用于建立身份档案</p>
          
          <div class="bg-blue-50 border border-blue-200 rounded-xl p-6 mb-6">
            <h4 class="text-lg font-semibold text-blue-800 mb-3">录入步骤</h4>
            <div class="space-y-3 text-left">
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">1</div>
                <span class="text-blue-700">请将面部对准摄像头</span>
              </div>
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">2</div>
                <span class="text-blue-700">保持面部稳定，等待倒计时</span>
              </div>
              <div class="flex items-center gap-3">
                <div class="w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center text-sm font-bold">3</div>
                <span class="text-blue-700">系统将自动进行人脸录入检测</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 捕获阶段 -->
      <div v-if="faceEnrollmentStep === 'capture'" class="space-y-6">
        <div class="text-center">
          <div class="relative w-80 h-80 bg-gray-100 rounded-xl mx-auto mb-6 overflow-hidden">
            <!-- 摄像头预览区域 -->
            <div class="w-full h-full flex items-center justify-center">
              <div v-if="isCountingDown" class="text-center">
                <div class="text-6xl font-bold text-blue-600 mb-4">{{ captureCountdown }}</div>
                <p class="text-lg text-gray-600">请保持面部稳定</p>
              </div>
              <div v-else-if="isCapturing" class="text-center">
                <div class="animate-spin w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
                <p class="text-lg text-gray-600">正在捕获人脸...</p>
              </div>
              <div v-else class="text-center">
                <el-icon class="text-6xl text-gray-400 mb-4">
                  <User />
                </el-icon>
                <p class="text-lg text-gray-600">准备就绪</p>
              </div>
            </div>
            
            <!-- 人脸检测框 -->
            <div class="absolute inset-8 border-2 border-green-500 rounded-lg"></div>
          </div>
        </div>
      </div>

      <!-- 确认阶段 -->
      <div v-if="faceEnrollmentStep === 'confirm'" class="space-y-6">
        <div class="text-center">
          <div class="w-32 h-32 bg-gray-100 rounded-xl mx-auto mb-6 overflow-hidden">
            <img v-if="faceImage" :src="faceImage" alt="人脸图像" class="w-full h-full object-cover" />
          </div>
          <h3 class="text-xl font-semibold text-gray-900 mb-4">正在检测...</h3>
          
          <!-- 验证进度 -->
          <div class="space-y-4">
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-700">人脸检测</span>
                <span class="text-sm font-bold text-blue-600">{{ faceDetectionConfidence }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-blue-500 h-2 rounded-full transition-all duration-500" :style="{ width: faceDetectionConfidence + '%' }"></div>
              </div>
            </div>
            
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-700">活体检测</span>
                <span class="text-sm font-bold text-green-600">{{ livenessScore }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-green-500 h-2 rounded-full transition-all duration-500" :style="{ width: livenessScore + '%' }"></div>
              </div>
            </div>
            
            <div class="bg-gray-50 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-700">图像质量</span>
                <span class="text-sm font-bold text-purple-600">{{ imageQuality }}%</span>
              </div>
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-purple-500 h-2 rounded-full transition-all duration-500" :style="{ width: imageQuality + '%' }"></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 成功阶段 -->
      <div v-if="faceEnrollmentStep === 'success'" class="space-y-6">
        <div class="text-center">
          <div class="w-24 h-24 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-4xl">
              <CircleCheck />
            </el-icon>
          </div>
          <h3 class="text-2xl font-bold text-green-600 mb-4">录入成功！</h3>
          <p class="text-gray-600 mb-6">人脸录入完成，身份档案已建立</p>
          
          <div class="bg-green-50 border border-green-200 rounded-xl p-6">
            <h4 class="text-lg font-semibold text-green-800 mb-3">录入结果</h4>
            <div class="space-y-2 text-left">
              <div class="flex justify-between">
                <span class="text-green-700">人脸检测置信度：</span>
                <span class="font-bold text-green-800">{{ faceVerificationResult.confidence }}%</span>
              </div>
              <div class="flex justify-between">
                <span class="text-green-700">活体检测分数：</span>
                <span class="font-bold text-green-800">{{ faceVerificationResult.liveness }}%</span>
              </div>
                              <div class="flex justify-between">
                  <span class="text-green-700">图像质量：</span>
                  <span class="font-bold text-green-800">{{ faceEnrollmentResult.quality }}%</span>
                </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 失败阶段 -->
      <div v-if="faceEnrollmentStep === 'failed'" class="space-y-6">
        <div class="text-center">
          <div class="w-24 h-24 bg-red-500 rounded-full flex items-center justify-center mx-auto mb-6">
            <el-icon class="text-white text-4xl">
              <Warning />
            </el-icon>
          </div>
          <h3 class="text-2xl font-bold text-red-600 mb-4">录入失败</h3>
          <p class="text-gray-600 mb-6">{{ faceEnrollmentResult?.reason || '人脸录入失败，请重新尝试' }}</p>
          
          <div class="bg-red-50 border border-red-200 rounded-xl p-6">
            <h4 class="text-lg font-semibold text-red-800 mb-3">可能的原因</h4>
            <div class="space-y-2 text-left text-red-700">
              <div>• 光线不足或面部不清晰</div>
              <div>• 面部角度不当或距离过远</div>
              <div>• 网络连接不稳定</div>
              <div>• 系统识别异常</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 对话框底部按钮 -->
      <template #footer>
        <div class="flex justify-center">
          <!-- 准备阶段按钮 -->
          <el-button 
            v-if="faceEnrollmentStep === 'prepare'" 
            type="primary" 
            size="large" 
            @click="startFaceCapture" 
            class="px-8 py-3 text-lg font-medium"
          >
            开始录入
          </el-button>
          
          <!-- 成功阶段按钮 -->
          <div v-if="faceEnrollmentStep === 'success'" class="flex gap-4">
            <el-button 
              type="success" 
              size="large" 
              @click="confirmFaceEnrollment" 
              class="px-8 py-3 text-lg font-medium"
            >
              确认完成
            </el-button>
            <el-button 
              type="primary" 
              size="large" 
              @click="closeFaceEnrollmentDialog" 
              class="px-8 py-3 text-lg font-medium"
            >
              关闭
            </el-button>
          </div>
          
          <!-- 失败阶段按钮 -->
          <div v-if="faceEnrollmentStep === 'failed'" class="flex gap-4">
            <el-button size="large" @click="retryFaceEnrollment" class="px-8 py-3 text-lg">
              重新尝试
            </el-button>
            <el-button type="primary" size="large" @click="closeFaceEnrollmentDialog" class="px-8 py-3 text-lg font-medium">
              关闭
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElCheckbox } from 'element-plus'
import { Search, User, Camera, Warning, CircleCheck, InfoFilled, Upload, Document, Clock, Trophy, Lock, Iphone, Message } from '@element-plus/icons-vue'
import { userApi, userUtils } from '../api/user.js'

const router = useRouter()

// 响应式数据
const searchText = ref('')
const saving = ref(false)
const changingPassword = ref(false)
const showPasswordDialog = ref(false)
const showVerificationDialog = ref(false)
const submittingVerification = ref(false)

// 验证码相关
const showPhoneVerifyDialog = ref(false)
const showEmailVerifyDialog = ref(false)
const phoneVerifyCode = ref('')
const emailVerifyCode = ref('')
const phoneCountdown = ref(0)
const emailCountdown = ref(0)
const generatedPhoneCode = ref('')
const generatedEmailCode = ref('')
const autoFillVerifyCode = ref(true)

// 人脸录入相关
const showFaceEnrollmentDialog = ref(false)
const faceEnrollmentStep = ref('prepare') // prepare, capture, confirm, success, failed
const faceImage = ref('')
const isCapturing = ref(false)
const faceEnrollmentResult = ref(null)
const faceDetectionConfidence = ref(0)
const livenessScore = ref(0)
const imageQuality = ref(0)
const captureCountdown = ref(3)
const isCountingDown = ref(false)

// 用户信息
const userInfo = reactive({
  nickname: '张三',
  username: 'zhangsan123',
  phone: '13800138000',
  email: 'zhangsan@example.com',
  gender: 'male',
  birthday: '1990-01-01',
  avatar: '',
  isVerified: false,
  realName: '',
  verifiedAt: '',
  faceEnrolled: false,
  faceEnrolledAt: ''
})

// 用户统计
const userStats = reactive({
  totalCourses: 12,
  totalHours: 156,
  certificates: 8
})

// 密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 实名认证表单
const verificationForm = reactive({
  realName: '',
  idNumber: '',
  frontImage: '',
  backImage: '',
  agreePrivacy: false
})

// 方法
const startLearning = () => {
  router.push('/study')
}

const goToProfile = () => {
  router.push('/profile')
}

// 生成六位数验证码
const generateVerifyCode = () => {
  return Math.floor(100000 + Math.random() * 900000).toString();
};

// 开始倒计时
const startCountdown = (type) => {
  const countdown = type === 'phone' ? phoneCountdown : emailCountdown;
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 人脸录入相关方法
const openFaceEnrollment = () => {
  showFaceEnrollmentDialog.value = true;
  faceEnrollmentStep.value = 'prepare';
  faceImage.value = '';
  faceEnrollmentResult.value = null;
  faceDetectionConfidence.value = 0;
  livenessScore.value = 0;
  imageQuality.value = 0;
};

const startFaceCapture = () => {
  faceEnrollmentStep.value = 'capture';
  isCountingDown.value = true;
  captureCountdown.value = 3;
  
  const countdownTimer = setInterval(() => {
    captureCountdown.value--;
    if (captureCountdown.value <= 0) {
      clearInterval(countdownTimer);
      isCountingDown.value = false;
      captureFace();
    }
  }, 1000);
};

const captureFace = () => {
  isCapturing.value = true;
  
  // 模拟人脸捕获过程
  setTimeout(() => {
    // 生成模拟的人脸图像（实际项目中应该从摄像头获取）
    faceImage.value = '';
    
    isCapturing.value = false;
    faceEnrollmentStep.value = 'confirm';
    
    // 模拟人脸录入检测过程
    simulateFaceEnrollment();
  }, 2000);
};

const simulateFaceEnrollment = () => {
  // 模拟录入检测进度
  const enrollmentSteps = [
    { step: '人脸检测', confidence: 95 },
    { step: '活体检测', liveness: 98 },
    { step: '图像质量', quality: 92 }
  ];
  
  let currentStep = 0;
  const enrollmentTimer = setInterval(() => {
    if (currentStep < enrollmentSteps.length) {
      const step = enrollmentSteps[currentStep];
      
      if (step.confidence) {
        faceDetectionConfidence.value = step.confidence;
      }
      if (step.liveness) {
        livenessScore.value = step.liveness;
      }
      if (step.quality) {
        imageQuality.value = step.quality;
      }
      
      currentStep++;
    } else {
      clearInterval(enrollmentTimer);
      
      // 模拟录入结果
      const isSuccess = Math.random() > 0.1; // 90%成功率
      if (isSuccess) {
        faceEnrollmentStep.value = 'success';
        faceEnrollmentResult.value = {
          success: true,
          confidence: faceDetectionConfidence.value,
          liveness: livenessScore.value,
          quality: imageQuality.value
        };
      } else {
        faceEnrollmentStep.value = 'failed';
        faceEnrollmentResult.value = {
          success: false,
          reason: '人脸录入失败，请重新尝试'
        };
      }
    }
  }, 1000);
};

const retryFaceEnrollment = () => {
  faceEnrollmentStep.value = 'prepare';
  faceImage.value = '';
  faceEnrollmentResult.value = null;
  faceDetectionConfidence.value = 0;
  livenessScore.value = 0;
  imageQuality.value = 0;
};

const confirmFaceEnrollment = () => {
  if (faceEnrollmentResult.value?.success) {
    ElMessage.success('人脸录入成功！');
    showFaceEnrollmentDialog.value = false;
    // 这里可以更新用户的人脸录入状态
    userInfo.faceEnrolled = true;
    userInfo.faceEnrolledAt = new Date().toISOString();
  }
};

const closeFaceEnrollmentDialog = () => {
  showFaceEnrollmentDialog.value = false;
  // 重置状态
  faceEnrollmentStep.value = 'prepare';
  faceImage.value = '';
  faceEnrollmentResult.value = null;
  faceDetectionConfidence.value = 0;
  livenessScore.value = 0;
  imageQuality.value = 0;
};

const uploadAvatar = () => {
  // 创建文件输入元素
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = async (event) => {
    const file = event.target.files[0]
    if (!file) return
    
    // 验证文件大小和格式
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error('文件大小不能超过5MB')
      return
    }
    
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
    if (!allowedTypes.includes(file.type)) {
      ElMessage.error('只支持jpg, png, gif格式的图片')
      return
    }
    
    try {
      const result = await userApi.uploadAvatar(file)
      userInfo.avatar = result.data.avatar
      ElMessage.success('头像上传成功')
    } catch (error) {
      ElMessage.error('头像上传失败')
    }
  }
  input.click()
}

const saveProfile = async () => {
  // 验证必填字段
  if (!userInfo.nickname) {
    ElMessage.warning('请输入昵称')
    return
  }
  
  if (!userInfo.email) {
    ElMessage.warning('请输入邮箱')
    return
  }
  
  if (!userUtils.validateEmail(userInfo.email)) {
    ElMessage.error('邮箱格式不正确')
    return
  }
  
  if (userInfo.phone && !userUtils.validatePhone(userInfo.phone)) {
    ElMessage.error('手机号格式不正确')
    return
  }
  
  saving.value = true
  try {
    const result = await userApi.updateProfile({
      nickname: userInfo.nickname,
      email: userInfo.email,
      phone: userInfo.phone,
      gender: userInfo.gender,
      birthday: userInfo.birthday
    })
    
    ElMessage.success('个人信息保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  } finally {
    saving.value = false
  }
}

const verifyPhone = async () => {
  if (!userInfo.phone) {
    ElMessage.warning('请先输入手机号')
    return
  }
  
  if (!userUtils.validatePhone(userInfo.phone)) {
    ElMessage.error('手机号格式不正确')
    return
  }
  
  // 生成验证码
  generatedPhoneCode.value = generateVerifyCode();
  
  // 显示验证码对话框
  showPhoneVerifyDialog.value = true;
  
  // 在控制台显示验证码，方便测试
  console.log('手机验证码:', generatedPhoneCode.value);
}

const verifyEmail = async () => {
  if (!userInfo.email) {
    ElMessage.warning('请先输入邮箱')
    return
  }
  
  if (!userUtils.validateEmail(userInfo.email)) {
    ElMessage.error('邮箱格式不正确')
    return
  }
  
  // 生成验证码
  generatedEmailCode.value = generateVerifyCode();
  
  // 显示验证码对话框
  showEmailVerifyDialog.value = true;
  
  // 在控制台显示验证码，方便测试
  console.log('邮箱验证码:', generatedEmailCode.value);
}

const changePassword = async () => {
  if (!passwordForm.oldPassword || !passwordForm.newPassword || !passwordForm.confirmPassword) {
    ElMessage.warning('请填写完整的密码信息')
    return
  }
  
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的新密码不一致')
    return
  }
  
  const passwordValidation = userUtils.validatePassword(passwordForm.newPassword)
  if (!passwordValidation.isValid) {
    ElMessage.warning('密码必须至少6位，包含字母和数字')
    return
  }
  
  changingPassword.value = true
  try {
    await userApi.changePassword({
      oldPassword: passwordForm.oldPassword,
      newPassword: passwordForm.newPassword
    })
    
    ElMessage.success('密码修改成功')
    showPasswordDialog.value = false
    passwordForm.oldPassword = ''
    passwordForm.newPassword = ''
    passwordForm.confirmPassword = ''
  } catch (error) {
    ElMessage.error('密码修改失败，请重试')
  } finally {
    changingPassword.value = false
  }
}

const maskPhone = (phone) => {
  return userUtils.maskPhone(phone)
}

const maskEmail = (email) => {
  return userUtils.maskEmail(email)
}

// 发送手机验证码
const sendPhoneCode = () => {
  if (!userInfo.phone) {
    ElMessage.warning('请先输入手机号')
    return
  }
  
  if (!userUtils.validatePhone(userInfo.phone)) {
    ElMessage.error('手机号格式不正确')
    return
  }
  
  // 生成验证码
  generatedPhoneCode.value = generateVerifyCode();
  
  // 自动填入验证码
  if (autoFillVerifyCode.value) {
    phoneVerifyCode.value = generatedPhoneCode.value;
  }
  
  startCountdown('phone');
  
  // 显示验证码（实际项目中应该通过短信发送）
  ElMessage.success(`验证码已发送到 ${userInfo.phone}，验证码：${generatedPhoneCode.value}`);
  
  // 在控制台显示验证码，方便测试
  console.log('手机验证码:', generatedPhoneCode.value);
};

// 发送邮箱验证码
const sendEmailCode = () => {
  if (!userInfo.email) {
    ElMessage.warning('请先输入邮箱')
    return
  }
  
  if (!userUtils.validateEmail(userInfo.email)) {
    ElMessage.error('邮箱格式不正确')
    return
  }
  
  // 生成验证码
  generatedEmailCode.value = generateVerifyCode();
  
  // 自动填入验证码
  if (autoFillVerifyCode.value) {
    emailVerifyCode.value = generatedEmailCode.value;
  }
  
  startCountdown('email');
  
  // 显示验证码（实际项目中应该通过邮件发送）
  ElMessage.success(`验证码已发送到 ${userInfo.email}，验证码：${generatedEmailCode.value}`);
  
  // 在控制台显示验证码，方便测试
  console.log('邮箱验证码:', generatedEmailCode.value);
};

// 验证手机验证码
const confirmPhoneCode = () => {
  if (!phoneVerifyCode.value) {
    ElMessage.warning('请输入验证码')
    return
  }
  
  if (phoneVerifyCode.value !== generatedPhoneCode.value) {
    ElMessage.error('验证码错误，请重新输入')
    return
  }
  
  ElMessage.success('手机验证成功！')
  showPhoneVerifyDialog.value = false;
  phoneVerifyCode.value = '';
  generatedPhoneCode.value = '';
};

// 验证邮箱验证码
const confirmEmailCode = () => {
  if (!emailVerifyCode.value) {
    ElMessage.warning('请输入验证码')
    return
  }
  
  if (emailVerifyCode.value !== generatedEmailCode.value) {
    ElMessage.error('验证码错误，请重新输入')
    return
  }
  
  ElMessage.success('邮箱验证成功！')
  showEmailVerifyDialog.value = false;
  emailVerifyCode.value = '';
  generatedEmailCode.value = '';
};

// 退出登录
const logout = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要退出登录吗？',
      '退出确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
    
    // 清除本地存储的token和用户信息
    localStorage.removeItem('userToken')
    sessionStorage.removeItem('userToken')
    localStorage.removeItem('userInfo')
    sessionStorage.removeItem('userInfo')
    
    ElMessage.success('已退出登录')
    router.push('/login')
  } catch (error) {
    // 用户取消退出
  }
}

// 上传身份证人像面
const uploadIdCardFront = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = async (event) => {
    const file = event.target.files[0]
    if (!file) return
    
    // 验证文件大小和格式
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error('文件大小不能超过5MB')
      return
    }
    
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
    if (!allowedTypes.includes(file.type)) {
      ElMessage.error('只支持jpg, png, gif格式的图片')
      return
    }
    
    // 创建预览URL
    verificationForm.frontImage = URL.createObjectURL(file)
  }
  input.click()
}

// 上传身份证国徽面
const uploadIdCardBack = () => {
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/*'
  input.onchange = async (event) => {
    const file = event.target.files[0]
    if (!file) return
    
    // 验证文件大小和格式
    if (file.size > 5 * 1024 * 1024) {
      ElMessage.error('文件大小不能超过5MB')
      return
    }
    
    const allowedTypes = ['image/jpeg', 'image/png', 'image/gif']
    if (!allowedTypes.includes(file.type)) {
      ElMessage.error('只支持jpg, png, gif格式的图片')
      return
    }
    
    // 创建预览URL
    verificationForm.backImage = URL.createObjectURL(file)
  }
  input.click()
}

// 提交实名认证
const submitVerification = async () => {
  // 开发模式：如果后端API不可用，使用模拟模式
  const isDevMode = import.meta.env.DEV
  
  if (isDevMode) {
    submittingVerification.value = true
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 2000))
      
      ElMessage.success('实名认证提交成功（模拟模式）')
      showVerificationDialog.value = false
      
      // 更新用户认证状态 - 模拟模式下直接设置为已认证
      userInfo.isVerified = true
      userInfo.realName = verificationForm.realName
      userInfo.verifiedAt = new Date().toISOString()
      
      // 重置表单
      verificationForm.realName = ''
      verificationForm.idNumber = ''
      verificationForm.frontImage = ''
      verificationForm.backImage = ''
      verificationForm.agreePrivacy = false
    } catch (error) {
      ElMessage.error('提交失败，请重试')
    } finally {
      submittingVerification.value = false
    }
    return
  }
  // 验证表单
  if (!verificationForm.realName) {
    ElMessage.warning('请输入真实姓名')
    return
  }
  
  if (!verificationForm.idNumber) {
    ElMessage.warning('请输入身份证号')
    return
  }
  
  if (!userUtils.validateIdNumber(verificationForm.idNumber)) {
    ElMessage.error('身份证号格式不正确')
    return
  }
  
  if (!verificationForm.frontImage) {
    ElMessage.warning('请上传身份证人像面')
    return
  }
  
  if (!verificationForm.backImage) {
    ElMessage.warning('请上传身份证国徽面')
    return
  }
  
  if (!verificationForm.agreePrivacy) {
    ElMessage.warning('请同意隐私协议')
    return
  }
  
  submittingVerification.value = true
  try {
    // 调用后端API提交实名认证
    const result = await userApi.submitVerification(verificationForm)
    
    // 根据后端返回结果更新认证状态
    if (result.success) {
      ElMessage.success('实名认证提交成功')
      userInfo.isVerified = true
      userInfo.verifiedAt = new Date().toISOString()
    } else {
      ElMessage.success('实名认证提交成功，请等待审核')
      userInfo.isVerified = false // 提交后状态为待审核
    }
    
    showVerificationDialog.value = false
    userInfo.realName = verificationForm.realName
    
    // 重置表单
    verificationForm.realName = ''
    verificationForm.idNumber = ''
    verificationForm.frontImage = ''
    verificationForm.backImage = ''
    verificationForm.agreePrivacy = false
  } catch (error) {
    console.error('实名认证提交失败:', error)
    // 根据错误类型显示不同的错误信息
    if (error.response?.status === 422) {
      ElMessage.error('请检查输入信息是否正确')
    } else if (error.response?.status === 409) {
      ElMessage.error('该身份证号已被认证')
    } else if (error.code === 'NETWORK_ERROR' || error.message?.includes('Network Error')) {
      ElMessage.error('网络连接失败，请检查网络设置')
    } else {
      ElMessage.error('提交失败，请重试')
    }
  } finally {
    submittingVerification.value = false
  }
}

// 计算是否可以提交认证
const canSubmitVerification = computed(() => {
  return verificationForm.realName && 
         verificationForm.idNumber && 
         verificationForm.frontImage && 
         verificationForm.backImage && 
         verificationForm.agreePrivacy
})

// 生命周期
onMounted(async () => {
  try {
    // 获取用户信息
    const userData = await userApi.getProfile()
    Object.assign(userInfo, userData.data)
    
    // 获取学习统计
    const statsData = await userApi.getStats()
    Object.assign(userStats, statsData.data)
  } catch (error) {
    console.error('获取用户数据失败:', error)
  }
})
</script>

<style scoped>
.el-input {
  --el-input-bg-color: #ffffff;
  --el-input-border-color: #e5e7eb;
  --el-input-hover-border-color: #d1d5db;
  --el-input-focus-border-color: #3b82f6;
}



.rounded-lg {
  border-radius: 0.5rem;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* 对话框样式 */
:deep(.verification-dialog .el-dialog__header) {
  padding: 24px 24px 0;
}

:deep(.verification-dialog .el-dialog__title) {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
}

:deep(.verification-dialog .el-dialog__body) {
  padding: 24px;
}

:deep(.verification-dialog .el-dialog__footer) {
  padding: 0 24px 24px;
}

:deep(.password-dialog .el-dialog__header) {
  padding: 24px 24px 0;
}

:deep(.password-dialog .el-dialog__title) {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
}

:deep(.password-dialog .el-dialog__body) {
  padding: 24px;
}

:deep(.password-dialog .el-dialog__footer) {
  padding: 0 24px 24px;
}

:deep(.verify-dialog .el-dialog__header) {
  padding: 24px 24px 0;
}

:deep(.verify-dialog .el-dialog__title) {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
}

:deep(.verify-dialog .el-dialog__body) {
  padding: 24px;
}

:deep(.verify-dialog .el-dialog__footer) {
  padding: 0 24px 24px;
}

:deep(.face-enrollment-dialog .el-dialog__header) {
  padding: 24px 24px 0;
}

:deep(.face-enrollment-dialog .el-dialog__title) {
  font-size: 24px;
  font-weight: bold;
  color: #1f2937;
}

:deep(.face-enrollment-dialog .el-dialog__body) {
  padding: 24px;
}

:deep(.face-enrollment-dialog .el-dialog__footer) {
  padding: 0 24px 24px;
}

/* 卡片悬停效果 */
.bg-white {
  transition: all 0.3s ease;
}

.bg-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 按钮悬停效果 */
.el-button {
  transition: all 0.3s ease;
}

.el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* 输入框焦点效果 */
.el-input:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -2px rgba(59, 130, 246, 0.05);
}
</style>
